<template>
  <div>
    <div class="center">
      <!-- 头部 -->
      <div class="table_header flex flex_bet flex-wrap">
        <div class="table_button">
          <el-button type="primary" icon="el-icon-refresh" size="mini" @click="Refresh"></el-button>
          <el-button type="primary" icon="el-icon-plus" size="mini" @click="toAddData">添加</el-button>
        </div>
        <div class="table_searchs flex">
          <div class="table_search flex">
            <el-input placeholder="搜索" v-model="searchInput" class="input-with-select" size="small">
              <el-select v-model="select" slot="prepend" placeholder="请选择" class="table_select" style="width:105px">
                <el-option label="归属" value="1"></el-option>
                <el-option label="sn第三四位" value="2"></el-option>
                <el-option label="批次" value="3"></el-option>
              </el-select>
              <el-button slot="append" icon="el-icon-search" @click="idnameSearch"></el-button>
            </el-input>
          </div>
          <dynamicTable :checkboxVal="checkboxVal" @alter="alterCheckbok"/>
        </div>
      </div>
      <!-- table -->
      <el-table stripe style="width: 100%" :data="tableData" :key="key" border fit highlight-current-row ref="tableDataRef">
        <el-table-column v-if="colData[0].istrue" min-width="50" align="center" prop="id" label="ID" fixed></el-table-column>
        <el-table-column v-if="colData[1].istrue" min-width="120" align="center" prop="admin_name" label="归属" fixed></el-table-column>
        <el-table-column v-if="colData[2].istrue" min-width="120" align="center" prop="nameCode" label="型号" fixed></el-table-column>
        <el-table-column v-if="colData[3].istrue" min-width="100" align="center" prop="batch" label="分发批次" fixed>
          <template slot-scope="scope">
            <p v-for="(item,index) in scope.row.batch" :key="item.id" style="margin: 0;padding: 0">{{ item.batch }}</p>
          </template>
        </el-table-column>
        <el-table-column v-if="colData[4].istrue" align="center" prop="rotateName" min-width="120" label="自动旋转屏幕"></el-table-column>
        <el-table-column align="center" prop="rotationName" min-width="120" label="自动屏幕方向"></el-table-column>
        <el-table-column v-if="colData[5].istrue" align="center" prop="brightnessName" min-width="90" label="默认亮度"></el-table-column>
        <el-table-column v-if="colData[6].istrue" align="center" prop="timeoutScreenName" min-width="90" label="屏幕超时"></el-table-column>
        <el-table-column v-if="colData[7].istrue" align="center" prop="fontSizeName" min-width="90" label="字体大小"></el-table-column>
<!--        <el-table-column v-if="colData[8].istrue" align="center" prop="displaySizeName" min-width="90" label="显示大小"></el-table-column>-->
        <el-table-column v-if="colData[9].istrue" align="center" prop="media_volume" min-width="90" label="媒体音量">
          <template slot-scope="scope">
            <p>{{ scope.row.media_volume }}%</p>
          </template>
        </el-table-column>
        <el-table-column v-if="colData[10].istrue" align="center" prop="info_volume" min-width="120" label="铃声和通知音量">
          <template slot-scope="scope">
            <p>{{ scope.row.info_volume }}%</p>
          </template>
        </el-table-column>
        <el-table-column v-if="colData[11].istrue" align="center" prop="touch_volume" min-width="100" label="触摸提示音">
          <template slot-scope="scope">
            <p>{{ scope.row.touch_volume == 1 ? '开启' : '关闭' }}</p>
          </template>
        </el-table-column>
        <el-table-column v-if="colData[12].istrue" align="center" prop="touch_vibrate" min-width="100" label="触摸震动">
          <template slot-scope="scope">
            <p>{{ scope.row.touch_vibrate == 1 ? '开启' : '关闭' }}</p>
          </template>
        </el-table-column>
        <el-table-column v-if="colData[13].istrue" align="center" prop="wallpaper" min-width="120" label="壁纸">
          <template slot-scope="scope">
            <el-image v-if="scope.row.wallpaper!== ''" style="width: 120px; height: 100px" :src="scope.row.wallpaper" fit="fill"></el-image>
          </template>
        </el-table-column>
        <el-table-column v-if="colData[13].istrue" align="center" prop="wallpaper" min-width="120" label="锁屏壁纸">
          <template slot-scope="scope">
            <el-image v-if="scope.row.lock_img!==''" style="width: 120px; height: 100px" :src="scope.row.lock_img" fit="fill"></el-image>
          </template>
        </el-table-column>
        <el-table-column v-if="colData[14].istrue" min-width="130px" align="center" prop="create_time" label="创建时间">
          <template slot-scope="scope">{{ scope.row.create_time| newDate }}</template>
        </el-table-column>
        <el-table-column min-width="150" align="center" prop="log" label="操作">
          <template slot-scope="scope">
            <el-row>
              <el-button size="mini" type="primary" @click="openEdit(scope.row)">编辑</el-button>
              <el-button size="mini" @click="toDelData(scope.row.id)">删除</el-button>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="paging">
        <el-pagination background :current-page.sync="listQuery.startSize" @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 50, 100, 200]" layout="total, sizes, prev, pager, next, jumper" :total="total" :page-size="listQuery.pageSize">
        </el-pagination>
      </div>
      <!-- 删除弹窗 -->
      <delete-Dialog title="" :visible.sync="deleteDialogs.show" width="25%" top="40vh" @deleteEvents="deleteEvents" :deleteText="deleteDialogs.deleteText"/>
    </div>

    <el-dialog title="安卓系统初始项设置" :visible.sync="logShow" width="50%" :close-on-click-modal="false" :close-on-press-escape="false" @close="redactFormclose">
      <el-form :model="addForm" ref="ruleForm" :rules="rules">
        <el-form-item label="产品型号:" label-width="120px" prop="sn_three_four">
          <el-select v-model="addForm.sn_three_four" placeholder="请选择" filterable>
            <el-option
              v-for="item in nameCodeOptions"
              :key="item.name_code"
              :label="item.name"
              :value="item.name_code"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="批次:" label-width="120px" prop="batch">
          <el-select v-model="addForm.batch" multiple filterable placeholder="请选择批次">
            <el-option
              v-for="item in batchArr"
              :key="item.id"
              :label="item.batch"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="自动旋转屏幕:" label-width="120px" prop="rotate">
          <el-select v-model="addForm.rotate" filterable placeholder="请选择">
            <el-option
              v-for="item in rotateArr"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="自动屏幕方向:" label-width="120px" prop="rotation">
          <el-select v-model="addForm.rotation" filterable placeholder="请选择">
            <el-option
              v-for="item in rotationArr"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="默认屏幕亮度:" label-width="120px" prop="brightness">
          <div style="width: 50%">
            <el-slider v-model="addForm.brightness"></el-slider>
          </div>
        </el-form-item>
        <el-form-item label="默认屏幕超时熄屏:" label-width="140px" prop="timeout_screen">
          <el-select v-model="addForm.timeout_screen" filterable placeholder="请选择">
            <el-option
              v-for="item in timeoutScreenArr"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="默认系统字体大小:" label-width="140px" prop="font_size">
          <el-select v-model="addForm.font_size" filterable placeholder="请选择">
            <el-option
              v-for="item in fontSizeArr"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="默认系统显示大小:" label-width="140px" prop="display_size">
          <el-select v-model="addForm.display_size" filterable placeholder="请选择">
            <el-option
              v-for="item in displayArr"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="默认媒体音量:" label-width="140px" prop="media_volume">
          <div style="width: 50%">
            <el-slider v-model="addForm.media_volume" :max="15" :show-tooltip="false"></el-slider>
          </div>
        </el-form-item>
        <el-form-item label="默认铃声和通知音量:" label-width="160px" prop="info_volume">
          <div style="width: 50%">
            <el-slider v-model="addForm.info_volume" :max="15" :show-tooltip="false"></el-slider>
          </div>
        </el-form-item>
        <el-form-item label="默认触摸提示音:" label-width="160px" prop="touch_volume">
          <el-radio-group v-model="addForm.touch_volume">
            <el-radio :label="1">默认开启</el-radio>
            <el-radio :label="-1">默认关闭</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="默认触摸震动:" label-width="160px" prop="touch_vibrate">
          <el-radio-group v-model="addForm.touch_vibrate">
            <el-radio :label="1">默认开启</el-radio>
            <el-radio :label="-1">默认关闭</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="默认桌面壁纸:" label-width="160px" prop="wallpaper">
          <div class="flex">
            <el-upload
              class="avatar-uploader"
              action
              :auto-upload="false"
              :show-file-list="false"
              :before-upload="beforeAvatarUpload"
              :on-change="courseImgUpload"
            >
              <img v-if="addForm.wallpaper" :src="addForm.wallpaper" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <div> <i v-if="addForm.wallpaper" class="el-icon-delete" @click="addForm.wallpaper=''"></i></div>
          </div>
        </el-form-item>
        <el-form-item label="默认锁屏壁纸:" label-width="160px" prop="wallpaper">
          <div class="flex">
            <el-upload
              class="avatar-uploader"
              action
              :auto-upload="false"
              :show-file-list="false"
              :before-upload="beforeAvatarUpload"
              :on-change="lockImgUpload"
            >
              <img v-if="addForm.lock_img" :src="addForm.lock_img" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <div> <i v-if="addForm.lock_img" class="el-icon-delete" @click="addForm.lock_img=''"></i></div>
          </div>
        </el-form-item>
        <el-form-item label-width="10px">
          <i style="color: #F56C6C">(注: 建议熄屏期间关闭wifi 以延长电池续航)</i><br>
          <i>在线壁纸，请根据机型屏幕规格上传，如FHD-W2400*H1920、2K屏-W2400*H2000</i>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="logShow  = false" size="mini" round>取 消</el-button>
        <el-button v-if="compileBtn" type="primary" size="mini" round @click="getAddScreenWifiStatus('ruleForm')">添加
        </el-button>
        <el-button v-else type="primary" size="mini" round @click="getEditSimControl('ruleForm')">修改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import dynamicTable from "@/components/DynamicTable";
import objectable from "@/utils/objectable.js";
import {getBatchTwo} from "@/api/equipment.js";
import deleteDialog from "@/components/deleteDialog";
import {getNameCode} from "@/api/appUpdate";
import {
  addSystemInit,
  delSystemInit,
  editSystemInit,
  querySystemInit,
} from "@/api/customMade";
import {ossImage} from "@/utils/ossUpload";

export default {
  components: {dynamicTable, deleteDialog},
  data() {
    return {
      checkboxVal: ['ID', '归属', '型号', '分发批次', '自动旋转屏幕', '默认亮度', '屏幕超时', '字体大小', '显示大小', '默认媒体音量', '默认铃声和通知音量', '默认触摸提示音', '默认触摸震动', '壁纸', '创建时间'],
      key: 1,
      colData: [], //动态控制table
      total: 0,
      searchInput: "",
      select: "1", //搜索条件
      //归属table
      tableData: [],
      logShow: false,
      listQuery: {
        userId: localStorage.getItem("ID"),
        startSize: 1,
        pageSize: 10,
        username: undefined,
        nameCode: '',
        batch: ''
      },
      batchData: [],
      addForm: {
        batch: [],
        sn_three_four: '',
        rotate: 4,
        brightness: 80,
        timeout_screen: 30,  //以秒为单位
        font_size: 2,
        display_size: 2,
        media_volume: 12,
        info_volume: 5,
        touch_volume: -1,
        touch_vibrate: -1,
        img_screen: 1,
        wallpaper: '',
        rotation: 0,
        lock_img: ''
      },
      rules: {
        batch: [{required: true, message: "请选择批次", trigger: "blur"}],
        sn_three_four: [{required: true, message: "请选择型号", trigger: "blur"}],
        rotate: [{required: true, message: "请设置自动旋转屏幕", trigger: "change"}],
        rotation: [{required: true, message: "请设置自动屏幕方向", trigger: "change"}],
        brightness: [{required: true, message: "请设置屏幕亮度", trigger: "change"}],
        timeout_screen: [{required: true, message: "请设置屏幕超时熄屏", trigger: "change"}],
        font_size: [{required: true, message: "请设置默认系统字体大小", trigger: "change"}],
        display_size: [{required: true, message: "请设置默认系统显示大小", trigger: "change"}],
        media_volume: [{required: true, message: "请设置媒体音量", trigger: "change"}],
        info_volume: [{required: true, message: "请设置铃声和通知音量", trigger: "change"}],
        touch_volume: [{required: true, message: "请设置触摸提示音", trigger: "change"}],
        touch_vibrate: [{required: true, message: "请设置触摸震动", trigger: "change"}],
      },
      deleteDialogs: {show: false, deleteText: '', deleteId: 0},
      compileBtn: false,
      nameCodeOptions: [],
      batchArr: [],
      rotateArr: [
        {label: '默认关闭且平板禁用', value: 1},
        {label: '默认开启且平板禁用', value: 2},
        {label: '默认关闭且平板可修改', value: 3},
        {label: '默认开启且平板可修改', value: 4},
      ],
      rotationArr: [
        {label: '默认', value: 0},
        {label: '竖屏向上', value: 1},
        {label: '竖屏向下', value: 2},
        {label: '横屏向上', value: 3},
        {label: '横屏向下', value: 4}
      ],
      timeoutScreenArr: [
        {label: '15秒', value: 15},
        {label: '30秒', value: 30},
        {label: '1分钟', value: 60},
        {label: '2分钟', value: 120},
        {label: '5分钟', value: 300},
        {label: '10分钟', value: 600},
        {label: '30分钟', value: 1800},
        {label: '永不', value: -1},
      ],
      fontSizeArr: [
        {label: '小', value: 1},
        {label: '默认', value: 2},
        {label: '大', value: 3},
        {label: '最大', value: 4}
      ],
      displayArr: [
        {label: '小', value: 1},
        {label: '默认', value: 2},
        {label: '大', value: 3},
        {label: '较大', value: 4},
        {label: '最大', value: 5}
      ]
    }
  },
  created() {
    this.colData = objectable(this.checkboxVal, this.checkboxVal); //转为数组对象，好控制table
    this.queryScreenWifiStatus()
    this.getBatchTwos()
    this.getNameCode();
    this.getBatchTwo()
  },
  methods: {
    //删除
    toDelData(id) {
      this.deleteDialogs.show = true
      this.deleteDialogs.deleteId = id
    },
    //删除按钮事件
    deleteEvents() {
      let params = {
        userId: localStorage.getItem("ID"),
        last_ip: sessionStorage.getItem("Ip"),
        id: this.deleteDialogs.deleteId
      }
      delSystemInit(params).then(res => {
        this.$message.success(res.msg)
        this.queryScreenWifiStatus()
      })
    },
    //获取型号名称
    getNameCode() {
      getNameCode({userId: localStorage.getItem("id")}).then(res => {
        this.nameCodeOptions = res.data.nameCode
      }).catch(err => {
        this.nameCodeOptions = []
      })
    },
    getBatchTwo() {
      getBatchTwo({userId: localStorage.getItem("ID")}).then(res => {
        this.batchArr = res.data
      }).catch(err => {
        this.batchArr = []
      })
    },
    redactFormclose() {
      this.addForm = this.$options.data().addForm
    },
    openEdit(row) {
      this.logShow = true
      this.compileBtn = false
      this.addForm = {
        batch: row.batchArr,
        sn_three_four: row.sn_three_four,
        rotate: row.rotate,
        brightness: row.brightness,
        timeout_screen: row.timeout_screen,  //以秒为单位
        font_size: row.font_size,
        display_size: row.display_size,
        media_volume: row.media_volume,
        info_volume: row.info_volume,
        touch_volume: row.touch_volume,
        touch_vibrate: row.touch_vibrate,
        img_screen: row.img_screen,
        wallpaper: row.wallpaper,
        rotation: row.rotation,
        lock_img: row.lock_img,
        id: row.id
      }
    },
    getEditSimControl(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.addForm.userId = localStorage.getItem("ID")
          this.addForm.last_ip = sessionStorage.getItem("Ip")
          editSystemInit(this.addForm).then(res => {
            this.$message.success(res.msg)
            this.queryScreenWifiStatus()
            this.logShow = false
          }).catch(err => { })
        } else {
          return false
        }
      })
    },
    //添加按钮
    toAddData() {
      this.logShow = true
      this.compileBtn = true
    },
    getAddScreenWifiStatus(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.addForm.userId = localStorage.getItem("ID")
          this.addForm.last_ip = sessionStorage.getItem("Ip")
          addSystemInit(this.addForm).then(res => {
            this.$message.success(res.msg)
            this.queryScreenWifiStatus()
            this.logShow = false
          }).catch(err => { })
        } else {
          return false
        }
      })
    },
    //获取批次
    getBatchTwos() {
      getBatchTwo({userId: localStorage.getItem("ID")}).then(res => {
        this.batchData = res.data
      }).catch(err => {
        this.batchData = []
      })
    },
    queryScreenWifiStatus() {
      querySystemInit(this.listQuery).then(res => {
        this.tableData = res.data
        this.total = res.total
      }).catch(err => {
        this.total = 0
        this.tableData = []
      })
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt3M = file.size / 1024 / 1024 < 3;
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 3MB!');
      }
      return isJPG && isLt3M;
    },
    //图片上传
    courseImgUpload(res, file) {
      ossImage(res.raw, res.name).then(res => {//图片上传
        this.addForm.wallpaper = res
      }).catch(err => {
        this.$message.error("图标上传失败")
      })
    },
    //图片上传
    lockImgUpload(res, file) {
      ossImage(res.raw, res.name).then(res => {//图片上传
        this.addForm.lock_img = res
      }).catch(err => {
        this.$message.error("图标上传失败")
      })
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val
      this.queryScreenWifiStatus();
    },
    handleCurrentChange(val) {
      this.listQuery.startSize = val
      this.queryScreenWifiStatus();
    },
    Refresh() {
      this.listQuery = {userId: localStorage.getItem("ID"), startSize: 1, pageSize: 10, username: undefined}
      this.queryScreenWifiStatus()
    },
    idnameSearch() {
      if (!this.select) return this.$message.warning("请先选择查询条件");
      this.listQuery.startSize = 1
      this.listQuery.pageSize = 10
      switch (this.select) {
        case '1':
          this.listQuery.username = this.searchInput
          this.queryScreenWifiStatus();
          break;
        case '2':
          this.listQuery.nameCode = this.searchInput
          this.queryScreenWifiStatus();
          break;
        case '3':
          this.listQuery.batch = this.searchInput
          this.queryScreenWifiStatus();
          break;
      }
    },
    //下拉动态table子组件
    alterCheckbok(key, conte) {
      this.key = key;
      this.colData.filter(i => {
        if (conte.indexOf(i.title) != -1) {
          i.istrue = false;
          this.$nextTick(() => {
            this.$refs.tableDataRef.doLayout();
          });
        } else {
          i.istrue = true;
          this.$nextTick(() => {
            this.$refs.tableDataRef.doLayout();
          });
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.log {
  position: absolute;
  height: 100%;
  width: 100%;
}

.content_left {
  background-color: #394350;
  height: 100%;
  color: #ffffff;

  .log-picture {
    padding: 20px;

    h2 {
      font-weight: 500;
    }
  }

  .upLogo {
    margin-top: 20px;

    .logo_Title {
      margin-right: 5px;
    }

    .upload-demo {
      position: relative;
      right: 10px;
    }

    .logo_upload {
      width: 75%;
      position: relative;
    }

    .logoBtn {
      text-align: center;
    }
  }

  .facility {
    text-align: center;
  }

  .picture {
    text-align: center;
    margin-top: 40px;
  }

  .logo_text {
    margin-top: 40px;
    display: flex;
    justify-content: center;

    span {
      display: inline-block;
      width: 250px;
      font-size: 14px;
      line-height: 25px;

      p {
        margin: 0;
        font-size: 16px;
        padding-bottom: 10px;
      }
    }
  }

  .download-log {
    margin-top: 40px;
    display: flex;
    justify-content: center;

    .download-template {
      width: 250px;

      a {
        background-color: #252e3c;
        height: 40px;
        display: block;
        line-height: 40px;
        width: 110px;
        text-align: center;
        color: #70a1e2;
      }
    }
  }
}

.logo_confirm {
  text-align: center;
  margin-top: 50px;
}

.content_right {
  text-align: center;
  background-color: #1f2731;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  .default-img {
    // width: 419px;
    // height: 700px;
    img {
      width: 100%;
      height: 100%;
    }

    .zipTxt {
      color: #ffffff;
      margin: 0;
      font-size: 18px;
      font-weight: 600;
    }
  }
}

.closeBtn {
  position: absolute;
  top: 10px;
  right: 20px;
}

.uplogoRule {
  cursor: pointer;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
}

.avatar {
  width: 120px;
  height: 100px;
  display: block;
}
</style>

<style scoped>
/deep/ .el-progress__text {
  color: #fff;
}

/deep/ .el-button.is-round {
  border-radius: 4px;
}
</style>
